<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="货主单位">
        <el-input v-model="Cha.danwei"></el-input>
      </el-form-item>
      <el-form-item label="结算方式">
        <el-input v-model="Cha.jiesuan"></el-input>
      </el-form-item>
      <el-form-item label="核对状态">
        <el-select v-model="Cha.zhuangtai" placeholder="是否外协">
          <el-option label="全部" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经办人">
        <el-input v-model="Cha.jingbanren"></el-input>
      </el-form-item>
      <el-form-item label="业务日期" required>
        <el-col :span="18">
          <el-form-item prop="date1">
           <el-input type="date" v-model="XianList.riqi"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="YingPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Yingpidelete()">批量删除</el-button>
    <el-button type="danger" @click="YingAdd()">新增</el-button>
    <el-table ref="yingpi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="业务单号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.danhao }}</span>
        </template>
      </el-table-column>

      <el-table-column label="货主单位" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.danwei }}</span>
        </template>
      </el-table-column>

      <el-table-column label="结算方式" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.jiesuan }}</span>
        </template>
      </el-table-column>

      <el-table-column label="吨位" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.dunwei }}</span>
        </template>
      </el-table-column>

      <el-table-column label="单价" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.danjia }}</span>
        </template>
      </el-table-column>

      <el-table-column label="金额" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.jine }}</span>
        </template>
      </el-table-column>

      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.riqi }}</span>
        </template>
      </el-table-column>
      <el-table-column label="经报人" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.jingbanren }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.beizhu }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            scope.row.zhuangtai == 1 ? "已核对" : "未核对"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="YingEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="YingDelete(scope.row.id)"
            >删除</el-button
          >
          <el-button size="mini" type="danger" @click="YingHe(scope.row.id)"
            >核对</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="YingPage"
    />
    <!--应收添加-->
    <el-dialog title="提示" :visible.sync="YingAddShow" width="30%">
      <el-form ref="form" :model="XianList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input v-model="XianList.danwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="XianList.jiesuan">
                <el-radio label="支付宝" value="支付宝"></el-radio>
                <el-radio label="微信" value="微信"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="吨位">
              <el-input type="number" v-model="XianList.dunwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单价">
              <el-input type="number" v-model="XianList.danjia"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="金额">
              <el-input type="number" v-model="XianList.jine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期" required>
              <el-col :span="18">
                <el-form-item prop="date1">
                 <el-input type="date" v-model="XianList.riqi"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经报人">
              <el-input v-model="XianList.jingbanren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="XianList.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select
                v-model="XianList.zhuangtai"
                placeholder="请选择活动区域"
              >
                <el-option label="已核对" value="1"></el-option>
                <el-option label="未核对" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="YingBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--应收编辑-->
    <el-dialog title="提示" :visible.sync="YingEintShow" width="30%">
      <el-form ref="form" :model="YingTable" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input v-model="YingTable.danwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结算方式">
              <el-input v-model="YingTable.jiesuan"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="吨位">
              <el-input type="number" v-model="YingTable.dunwei"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单价">
              <el-input type="number" v-model="YingTable.danjia"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="金额">
              <el-input type="number" v-model="YingTable.jine"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期" required>
              <el-col :span="18">
                <el-form-item prop="date1">
                <el-input type="date" v-model="XianList.riqi"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="经报人">
              <el-input v-model="YingTable.jingbanren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="YingTable.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-input v-model="YingTable.zhuangtai"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="YingEintBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  YingPages, //查询
  Yingpideletes, //批删
  YingDeletes, //单删
  YingBaos, //添加
  YingEdits, //反填
  YingEintBaos, //保存
  YingHes, //核对
} from "@/api/system_base/JiesuanApi"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
      YingEintShow: false,
      YingAddShow: false,
      total: 0,
      tableData: [],

      Cha: {
        danwei: "",
        jiesuan: "",
        zhuangtai: "0",
        jingbanren: "",
        riqi: "",

        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      XianList: {
        danhao: "",
        danwei: "",
        jiesuan: "",
        dunwei: "",
        danjia: "",
        jine: "",
        riqi: "",
        jingbanren: "",
        beizhu: "",
        zhuangtai: "",
      },
      YingTable: [],
    };
  },
  created() {
    this.YingPage();
  },
  methods: {
    //核对
    YingHe(id) {
      YingEdits(id).then((r) => {
        this.YingTable = r.result;
        var aa = this.YingTable;
        aa.zhuangtai = 1;
        YingEintBaos(aa).then((r) => {
          this.$message("修改成功");

          this.YingPage();
        });
      });
    },
    //保存
    YingEintBao() {
       if(this.YingTable.danhao=="")
      {
        this.$message("单号不能空");
        return;
      }
       if(this.YingTable.danwei=="")
      {
        this.$message("单位不能空");
        return;
      }
       if(this.YingTable.jiesuan=="")
      {
        this.$message("结算方式不能空");
        return;
      }
       if (this.YingTable.dunwei == "" || this.YingTable.dunwei <= 0) {
        this.$message("吨位不能空或者数值范围不正确");
        return;
      }
       if (this.YingTable.danjia == "" || this.YingTable.danjia <= 0) {
        this.$message("单价不能空或者数值范围不正确");
        return;
      }
       if (this.YingTable.jine == "" || this.YingTable.jine <= 0) {
        this.$message("金额不能空或者数值范围不正确");
        return;
      }
       if(this.YingTable.riqi=="")
      {
        this.$message("日期不能空");
        return;
      }
       if(this.YingTable.jingbanren=="")
      {
        this.$message("经报人不能空");
        return;
      }
       if(this.YingTable.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }
      if (this.YingTable.zhuangtai == "" || this.YingTable.zhuangtai <= 0) {
        this.$message("请选择状态");
        return;
      }
      YingEintBaos(this.YingTable).then((r) => {
        this.$message("修改成功");
        this.YingEintShow = false;
        this.YingPage();
      });
    },
    //反填
    YingEdit(id) {
      this.YingEintShow = true;
      YingEdits(id).then((r) => {
        this.YingTable = r.result;
      });
    },
    //添加保存
    YingBao() {
     
      var data = new Date();
      let year = data.getFullYear(); // 年
      let month = data.getMonth() + 1; // 月
      let day = data.getDate(); // 日
      let hour = data.getHours(); // 时
      let minute = data.getMinutes(); // 分
      let second = data.getSeconds(); // 秒
      var ff = "SY" + year + month + day + hour + minute + second;
       this.XianList.danhao = ff;
      if(this.XianList.danhao=="")
      {
        this.$message("单号不能空");
        return;
      }
       if(this.XianList.danwei=="")
      {
        this.$message("单位不能空");
        return;
      }
       if(this.XianList.jiesuan=="")
      {
        this.$message("结算方式不能空");
        return;
      }
       if (this.XianList.dunwei == "" || this.XianList.dunwei <= 0) {
        this.$message("吨位不能空或者数值范围不正确");
        return;
      }
       if (this.XianList.danjia == "" || this.XianList.danjia <= 0) {
        this.$message("单价不能空或者数值范围不正确");
        return;
      }
       if (this.XianList.jine == "" || this.XianList.jine <= 0) {
        this.$message("金额不能空或者数值范围不正确");
        return;
      }
       if(this.XianList.riqi=="")
      {
        this.$message("日期不能空");
        return;
      }
       if(this.XianList.jingbanren=="")
      {
        this.$message("经报人不能空");
        return;
      }
       if(this.XianList.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }
       if (this.XianList.zhuangtai == "" || this.XianList.zhuangtai <= 0) {
        this.$message("请选择状态");
        return;
      }
      YingBaos(this.XianList).then((r) => {
        this.$message("添加成功");
        this.YingAddShow = false;
        this.YingPage();
      });
    },
    YingAdd() {
      this.YingAddShow = true;
    },
    //单删
    YingDelete(id) {
      if (confirm("确认要删除吗")) {
        YingDeletes(id).then((r) => {
          this.$message("删除成功");
          this.YingPage();
        });
      }
    },
    //批量删除
    Yingpidelete() {
      var arrid = [];
      var id = this.$refs.yingpi.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Yingpideletes(r).then((r) => {});
          this.$message("批删成功");
          this.YingPage();
        });
      }
    },

    //查询
    YingPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      YingPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaXianPage() {
      this.Cha.page = 1;
      this.YingPage();
    },
  },
};
</script>